<template>
	<view>
		<view v-if="vk.vuex.get('$app.appinfo.tips_switch')">
			<!-- 组件说明https://ext.dcloud.net.cn/plugin?id=2435 -->
			<tips :isCustom="true" :text="vk.vuex.get('$app.appinfo.tips_text') || '长按视频画面,拖动可快进'"></tips>
		</view>

		<view @click="back" class="backstyle">
			<u-icon name="arrow-left" size="40rpx" label="返回" color="#fff" labelColor="#fff" labelSize="36rpx"></u-icon>
		</view>

		<swiper
			:style="'width: ' + windowWidth + 'px; height: ' + windowHeight + 'px; background-color: #000000;'"
			:vertical="true"
			@animationfinish="animationfinish"
			@change="change"
			:current="current"
			:indicator-dots="false"
		>
			<swiper-item v-for="(list, index) in dataList" :key="index">
				<view v-if="k == index">
					<video
						v-if="isShow"
						:id="list._id + '_' + index"
						:muted="list.isplay"
						:autoplay="true"
						:enable-play-gesture="true"
						:enable-auto-rotation="true"
						:show-screen-lock-button="true"
						:controls="true"
						:show-center-play-btn="true"
						play-btn-position="center"
						:http-cache="true"
						:custom-cache="true"
						:show-play-btn="true"
						:show-fullscreen-btn="true"
						:show-loading="true"
						:enable-progress-gesture="true"
						:src="list.video_src"
						:style="'width: ' + windowWidth + 'px; height: ' + videoHeight + 'px; background-color: #000000;margin-top:110rpx'"
						:poster="tvinfo.tv_image"
						@play="play(list.state, $event)"
						@ended="ended"
						@progress="progress"
					></video>

					<view v-if="!isShow" @click="click_tvimg(currentInfo)">
						<image :src="tvinfo.tv_image" mode="aspectFit" :style="'width: ' + windowWidth + 'px; height: ' + windowHeight + 'px; background-color: #000000;'"></image>
					</view>

					<!-- 要先判断一下dataList[k+1]是否存在，不存在会报video_src未定义的错误 -->
					<view v-if="dataList[k + 1]">
						<!-- 实现下一个视频的预加载 -->
						<video
							:id="list._id + '_pre' + index"
							:muted="true"
							:autoplay="false"
							@progress="progress2"
							:http-cache="true"
							:src="dataList[k + 1].video_src"
							:style="'width: 0px; height: 0px;'"
						></video>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<view class="userInfo">
			<!-- 1.投诉 -->
			<view style="opacity: 1; margin-top: 30rpx" @click.stop="goComplaint">
				<view style="display: flex; flex-direction: column; align-items: center; margin-top: -90rpx">
					<image
						src="https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/tousu.png"
						style="pointer-events: none; width: 80rpx; height: 80rpx; margin-left: 5rpx"
					></image>
					<text class="xuanjiStyle">投诉</text>
				</view>
			</view>
			<!-- 2.点赞 -->

			<view @click="cLike(currentInfo.like)" style="opacity: 0.9; margin-top: 8px; display: flex; flex-direction: column; align-items: center">
				<image
					v-if="currentInfo.like"
					src="https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/xin.png"
					style="width: 40px; height: 40px"
				></image>
				<image
					v-if="!currentInfo.like"
					src="https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/xin-2.png"
					style="width: 40px; height: 40px"
				></image>

				<view class="xuanjiStyle" :class="{ likeNumActive: currentInfo.like }">
					{{ currentInfo.like_num > -1 ? currentInfo.like_num : 1 }}
				</view>
			</view>
			<!-- 3.追剧 -->

			<view @click="follow_tv" style="opacity: 0.9; margin-top: 20rpx; display: flex; flex-direction: column; align-items: center">
				<image
					v-show="!show_redicon"
					src="https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/liaotian-2.png"
					style="width: 75rpx; height: 75rpx"
				></image>
				<image
					v-show="show_redicon"
					src="https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/liaotian.png"
					style="width: 75rpx; height: 75rpx"
				></image>
				<text class="xuanjiStyle">追剧</text>
			</view>
			<!-- 4.分享 -->

			<view style="opacity: 0.9; margin-top: 30rpx">
				<view style="opacity: 0">
					<u-button openType="share" text="分享"></u-button>
				</view>
				<view style="display: flex; flex-direction: column; align-items: center; margin-top: -90rpx">
					<image
						src="https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/wx.png"
						style="pointer-events: none; width: 68rpx; height: 68rpx"
					></image>
					<text class="xuanjiStyle">分享</text>
				</view>
			</view>
			<!-- //选集 -->
			<view style="opacity: 0.9; margin-top: 30rpx; display: flex; flex-direction: column; align-items: center">
				<image src="https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/xj.png" style="width: 65rpx; height: 65rpx" @click="xuanji"></image>
				<text @click="xuanji" class="xuanjiStyle">选集</text>
			</view>
		</view>

		<!-- 最底下的文字部分 -->
		<view class="content" v-if="currentInfo.tv_name">
			<view class="userName" :style="'width: ' + (windowWidth - 90) + 'px;'">{{ currentInfo.title }}</view>
			<view @click="xuanji" class="words" :style="'width: ' + (windowWidth - 40) + 'px;'">《{{ currentInfo.tv_name }}》更新至{{ tvinfo.update_witch }}集|选集></view>
		</view>

		<!-- 短剧选集弹窗开始 -->
		<u-popup :show="show" @close="close" @open="open" :round="10" mode="bottom">
			<view class="tv_name">{{ tvinfo.tv_name }}</view>
			<view class="update_witch">更新至第 {{ total }} 集</view>
			<u-line length="750rpx"></u-line>

			<u-tabs :list="list1" @click="click" :scrollable="true" :current="currentTab"></u-tabs>

			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
				<view style="display: flex; flex-direction: row; flex-wrap: wrap">
					<view v-for="(item, index) in all" :key="index" style="margin: 10rpx" @click="check_series(item, index)">
						<view v-if="item.pay == 0 || item.had_pay == true">
							<image class="tv_image" :src="tvinfo.tv_image"></image>
							<view class="series">第 {{ item.series }} 集</view>
						</view>
						<view v-if="item.pay > 0 && item.had_pay == false && vk.vuex.get('$user.userInfo.plus_type') == 0">
							<image class="tv_image" :src="tvinfo.tv_image"></image>
							<view class="series">第 {{ item.series }} 集</view>
							<view class="lock_bg">
								<image class="lock" src="https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/lock.png"></image>
							</view>
						</view>
					</view>
				</view>
				<u-gap height="30rpx"></u-gap>
			</scroll-view>
		</u-popup>
		<!-- 短剧选集弹窗结束 -->

		<!-- 充值弹窗开始 -->
		<u-popup :show="rechargeShow" @close="rechargeShow = false" @open="rechargeopen" :round="10" mode="bottom">
			<view v-if="vk.vuex.get('$app.osName') == 'ios' && vk.vuex.get('$user.userInfo.invite_code').length < 5"></view>
			<view v-else>
				<view style="display: flex; justify-content: space-between">
					<view class="tv_name">我的余额：{{ vk.vuex.get('$user.userInfo.balance') }}金豆</view>
				</view>
				<view class="update_witch">
					解锁本集需 {{ dataList[k].pay }}金豆
					<image
						src="https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/jindou.png"
						style="width: 30rpx; height: 30rpx; margin-left: 12rpx"
					></image>
				</view>
			</view>

			<u-line length="750rpx"></u-line>

			<!-- 自定义套餐充值组件 -->
			<view v-if="vk.vuex.get('$user.userInfo._id')">
				<rechargelist :tv_name="currentInfo.tv_name" :tv_id="currentInfo.tv_id" :recharge="recharge"></rechargelist>
			</view>
		</u-popup>
		<!-- 充值弹窗结束 -->

		<!-- 公众号弹窗开始 -->
		<u-popup :round="10" mode="center" :show="showgzh">
			<view style="padding: 40rpx; width: 400rpx">
				<view @click="showgzh = false" style="margin-left: 90%">
					<u-icon size="42rpx" name="close"></u-icon>
				</view>
				<view style="align-items: center; display: flex; flex-direction: column">
					<view style="color: #c43c47; font-size: 40rpx; font-weight: 600; text-align: center">提示</view>
					<view style="font-size: 32rpx; text-align: center; margin: 40rpx 0; font-weight: 500">
						{{ vk.vuex.get('$app.appinfo.gzgzh_tip') || '关注公众号，剧情抢先看' }}
					</view>
					<view style="width: 200rpx; margin-top: 30rpx">
						<u-button shape="circle" color="#dc363d" @click="jump('/pages/index/gzgzh')">点击进入</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 公众号弹窗结束 -->

		<!-- 引导用户订阅弹窗开始 -->
		<u-popup :round="10" mode="center" :show="showdingyue">
			<view style="padding: 40rpx; width: 400rpx">
				<view @click="showdingyue = false" style="margin-left: 90%">
					<u-icon size="42rpx" name="close"></u-icon>
				</view>
				<view style="align-items: center; display: flex; flex-direction: column">
					<view style="font-size: 32rpx; text-align: center; margin: 40rpx 0; font-weight: 500">喜欢这部剧就加入订阅吧，下次观看更方便</view>
					<view style="width: 450rpx; display: flex; flex-wrap: nowrap">
						<view style="width: 200rpx; margin-top: 30rpx; margin-left: 15rpx">
							<u-button shape="circle" color="#cccccc" @click="closedingyue">继续退出</u-button>
						</view>
						<view style="width: 200rpx; margin-top: 30rpx; margin-left: 15rpx">
							<u-button shape="circle" color="#dc363d" @click="dingyue(true)">点击订阅</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 引导用户订阅弹窗结束 -->

		<!-- 防录屏插件 -->
		<yk-screenRecord></yk-screenRecord>
		<!-- 一部剧播放结束后，推荐其他3部剧 -->

		<view v-if="adviseMore">
			<advisetv></advisetv>
		</view>
	</view>
</template>

<script>
const db = uniCloud.database();
const _ = db.command;
import rechargelist from '@/components/rechargelist/recharge.vue';

//防录屏插件
import ykScreenRecord from '@/components/yk-screenRecord/yk-screenRecord';
//一部剧播放结束后，推荐其他3部剧
import advisetv from '@/components/wxlogin/advise-tv.vue';
export default {
	components: {
		rechargelist,
		ykScreenRecord,
		advisetv
	},
	data() {
		return {
			adviseMore: false, //默认不展示推荐弹窗，一部剧最后一集播完才提示
			recharge: [], //充值套餐列表
			isShow: false, //视频播放组件是否展示
			show_redicon: false,
			rechargeShow: false, //充值套餐弹窗
			showgzh: false, //公众号弹出框展示和隐藏
			showdingyue: false, //引导用户订阅弹窗展示和隐藏
			currentTab: 0, //弹出框索引
			backtext: '< 返回',
			windowWidth: 0,
			windowHeight: 0, //swiper组件高度
			videoHeight: 0, //视频组件高度
			platform: '',
			deleteHeight: 0,
			dataList: [],
			k: 999,
			current: 999, //和k值一起改，模板的值为0 ，但是为0时进来不会自动播放，所以改成3，也可以改成其他数字
			isChange: true,

			//popup
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			show: false,
			total: 0,
			all: [],
			list1: [],
			currentInfo: {},
			series_start: 0,
			series_end: 30,
			tvinfo: {
				tv_name: '',
				tv_image: '',
				_id: ''
			} //包含电视剧名称，封面图和ID
		};
	},
	watch: {
		async k(k, old_k) {
			console.log('k=', k, 'old_k=', old_k);
			this.isShow = false;
			//把当前视频信息存到currentInfo
			this.currentInfo = this.dataList[k];
			//判断是否需要付费
			let plus_type = vk.vuex.get('$user.userInfo.plus_type');
			if (this.dataList[k].pay > 0 && this.dataList[k].had_pay == false && plus_type == 0) {
				//当账户余额小于需支付金额时，提示充值
				if (vk.vuex.get('$user.userInfo.balance') < this.dataList[k].pay) {
					this.isShow = false; //关闭视频播放组件
					this.rechargeShow = true; //弹出充值套餐
					vk.vuex.set('$app.showIndexCoupou', true); //设置首页弹窗开关，true为开启
					return;
				}
				this.paySeries(this.dataList[k], k);
			}

			//当不存在充值方案时，即自动获取方案。如果需要每看一集重新拉取方案，可以把if判断删掉
			if (this.recharge.length == 0) {
				this.getRecgarge();
			}

			//延迟0.5秒，用户观感更顺滑
			setTimeout(() => {
				this.isShow = true;
			}, 500);

			//检查公众号弹窗和提前三集加载更多视频数据
			this.gzhbox(k);

			//检查下一集的点赞状态
			this.check_like(k);

			//记录年费会员看剧记录
			this.vip_history(k);
		}
	},
	async onLoad(option) {
		//判断用户是否登录，未登录则自动登录
		//这里的登录是解决小程序用户直接转发播放页，此时新用户进入小程序不经过首页登录。充值时就会报错
		//延时执行是防止从首页过来时登录代码未执行完
		setTimeout(() => {
			if (!vk.vuex.get('$user.userInfo._id')) {
				vk.userCenter.loginByWeixin({
					loading: false,
					data: {
						appid: vk.vuex.get('$app.appid'),
						appname: vk.vuex.get('$app.appname'),
						appsecret: '',
						invite_code: uni.getStorageSync('invite_code') || 0,
						tfid: uni.getStorageSync('tfid') || 0, //投放链接的_id
						type: ''
					},
					success: (data) => {
						console.log('播放页登录成功');
					}
				});
			}
		}, 3000);

		this.copy_onload(option);
		if (vk.vuex.get('$app.currenttv')) {
			this.tvinfo = vk.vuex.get('$app.currenttv');
		} else {
			const tvtemp = await db.collection('a_tv').doc(option.tv_id).get();
			this.tvinfo = tvtemp.result.data[0];
		}
		//计算总集数并分组
		this.computer();
	},
	onShow() {
		this.showgzh = false;
		let rechargeList = vk.vuex.get('$app.rechargelist');
		console.log('rechargeList=', rechargeList);
		//当本地缓存不存在充值方案时，即自动获取方案
		if (rechargeList.length == 0) {
			this.getRecgarge();
		} else {
			this.recharge = rechargeList;
		}

		setTimeout(() => {
			if (this.dataList.length == 0) {
				this.isShow = false;
				vk.toast('无数据');
				return;
			}
		}, 2000);

		console.log('this.k.pay=', this.dataList[this.k]);
		if (!this.dataList[this.k]) {
			return;
		}

		// 返回首页时,如果本集需付费,且未付费,则弹toast提示。否则就继续播放
		if (this.dataList[this.k].pay > 0 && this.dataList[this.k].had_pay == false) {
			//判断是否需要付费
			//当账户余额小于需支付金额时，提示充值
			if (vk.vuex.get('$user.userInfo.balance') < this.dataList[this.k].pay) {
				this.isShow = false;
				this.rechargeShow = true; //打开充值弹窗
				return;
			}
			//当用户账户余额大于该集所需金额是，开始播放且自动付费。
			this.isShow = true;
			this.paySeries(this.dataList[this.k], this.k);
		} else {
			this.dataList[this.k].state = 'play';
			uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play();
		}
	},
	onUnload() {
		this.add_history();
	},
	onHide() {
		this.add_history();
	},
	beforeDestroy() {
		if (this.tvinfo._id) {
			vk.callFunction({
				url: 'client/history/kh/churnCount',
				title: '请求中...',
				data: {
					appid: vk.vuex.get('$app.appid'),
					appname: vk.vuex.get('$app.appname'),
					tv_name: this.tvinfo.tv_name,
					tv_id: this.tvinfo._id,
					tv_image: this.tvinfo.tv_image,
					series: this.currentInfo.series
				},
				success: (data) => {
					console.log(data);
				}
			});
		}
	},
	onShareAppMessage() {
		let tv_id = this.tvinfo._id;
		let series = this.currentInfo.series;
		let invite_code = vk.vuex.get('$user.userInfo.my_invite_code');
		//带上剧ID，集数和个人邀请码转发
		return {
			title: this.tvinfo.tv_name, // 默认为小程序名称
			path: '/pages/index/index?path=player&tv_id=' + tv_id + '&series=' + series + '&invite_code=' + invite_code,
			imageUrl: this.tvinfo.tv_image // 默认为当前页面的截图
		};
	},
	methods: {
		// 钉钉预警
		DingDing(reason) {
			vk.callFunction({
				url: 'client/pay/kh/prompt_msg',
				title: '请求中...',
				data: {
					uid: vk.vuex.get('$user.userInfo._id'),
					tv_id: this.tvinfo._id,
					tv_name: this.tvinfo.tv_name,
					appid: vk.vuex.get('$app.appid'),
					reason
				},
				success: (data) => {
					console.log('钉钉提示');
				}
			});
		},
		// 点击投诉
		goComplaint() {
			console.log('我点击了');
			uni.navigateTo({
				url: `/pages_secondsub/complaint/complaint?tv_id=${this.tvinfo._id}&tv_name=${this.tvinfo.tv_name}&series=${this.currentInfo.series}&series_id=${this.currentInfo._id}` // 分包页面路径
			});
		},
		// 钉钉预警
		DingDing() {
			vk.callFunction({
				url: 'client/pay/kh/prompt_msg',
				title: '请求中...',
				data: {
					uid: vk.vuex.get('$user.userInfo._id'),
					tv_id: this.tvinfo._id,
					tv_name: this.tvinfo.tv_name,
					appid: vk.vuex.get('$app.appid')
				},
				success: (data) => {
					console.log('钉钉提示');
				}
			});
		},
		getRecgarge() {
			vk.callFunction({
				url: 'client/pay/kh/get_rechargelist',
				title: '请求中...',
				data: {
					appid: vk.vuex.get('$app.appid')
				},
				success: (data) => {
					this.recharge = data.recharge;
					if (data.recharge.length > 0) {
						vk.vuex.set('$app.rechargelist', data.recharge);
					}
				}
			});
		},
		copy_onload(option) {
			console.log('option=', option);
			// this.platform = uni.getSystemInfoSync().platform
			// var model = uni.getSystemInfoSync().model
			// if (this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' ||
			// 		model !==
			// 		'iPhone8')) {
			// 	this.deleteHeight = 50 //有 tabbar的 修改这里可以改变视频高度
			// }
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.videoHeight = uni.getSystemInfoSync().windowHeight - 130;
			vk.callFunction({
				url: 'client/video/pub/all_series',
				title: '加载中...',
				data: {
					series: option.series || '', //如果参数里有集数，则传集数，没集数默认空
					user_id: vk.vuex.get('$user.userInfo._id') || 'no',
					tv_id: option.tv_id,
					plus_type: vk.vuex.get('$user.userInfo.plus_type') || 0
				},
				success: (data) => {
					//为了避免0集的问题，当jump_serie为空或0是，赋值为1
					if (data.jump_serie * 1 == 0) {
						data.jump_serie = 1;
					}
					console.log('处理后的数据', data);
					this.dataList = data.series;
					for (var i = 0; i < data.series.length; i++) {
						//逐一判断当前数据列表里的集数和options里传过来的集数，相等时取i值，就是历史播放记录
						if (data.series[i].series == data.jump_serie * 1) {
							this.current = i;
							this.k = i;
							break;
						}
					}
				}
			});
		},
		loadMoreSerie(currentSerie) {
			//视频数量不足时，及时加载更多视频数据
			var that = this;
			vk.callFunction({
				url: 'client/video/pub/start_end_series',
				data: {
					start: currentSerie + 1,
					end: currentSerie + 30,
					user_id: vk.vuex.get('$user.userInfo._id') || 'no',
					tv_id: this.tvinfo._id,
					plus_type: vk.vuex.get('$user.userInfo.plus_type') || 0
				},
				success: (data) => {
					console.log('loadMoreSerie数据', data);
					that.dataList = that.dataList.concat(data.series);
				}
			});
		},
		//点击选集图标
		xuanji() {
			this.get_series_info(1, 30);
			this.show = true;
		},

		//点击弹出框的分集tab
		click(item) {
			console.log('clickitem', item);
			this.currentTab = item.index;
			this.series_start = item.start;
			this.series_end = item.end;
			this.get_series_info(item.start, item.end);
		},

		//点击选集跳转
		check_series(item, index) {
			var that = this;
			this.dataList = this.all;
			console.log('check_series_item=', item);
			console.log('check_series_index=', index);
			// 判断金豆是否不足,不足的话直接提示去充值
			let plus_type = vk.vuex.get('$user.userInfo.plus_type');
			if (vk.vuex.get('$user.userInfo.balance') < item.pay && item.had_pay == false && plus_type == 0) {
				this.k = index; //解决弹窗选集时，无法正确展示本集需要多少金豆的问题
				this.rechargeShow = true; //打开充值弹窗
				this.show = false; //关闭选集弹窗
				return;
			}

			if (item.pay > 0 && item.had_pay == false && plus_type == 0) {
				uni.showModal({
					title: '账户金豆余额:' + vk.vuex.get('$user.userInfo.balance'),
					content: '该集为付费内容，是否花' + item.pay + '金豆购买',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.paySeries(item, index);
						} else if (res.cancel) {
							//点取消，设置一下showIndexCoupou，返回首页后会弹窗优惠
							vk.vuex.set('$app.showIndexCoupou', true);
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			this.current = index;
			this.k = index;
			this.show = false;

			//如果是数据列表里最后一项，就继续加载数据
			if (index == this.dataList.length - 1) {
				let currentSerie = this.dataList[index].series;
				//继续加载更多
				this.loadMoreSerie(currentSerie);
			}
		},
		paySeries(item, index) {
			if (item.pay == 0) {
				return;
			}
			var that = this;
			vk.callFunction({
				url: 'client/pay/kh/paySeries',
				data: {
					tv_id: this.tvinfo._id,
					tv_name: this.tvinfo.tv_name,
					series: item.series,
					pay_amount: item.pay,
					series_id: item._id
				},
				complete: (res) => {
					if (res.result.money == -1) {
						that.rechargeShow = true; //打开充值弹窗
						return;
					}
					let userBalance = vk.vuex.get('$user.userInfo.balance');
					//修改前端用户金豆数量
					vk.vuex.set('$user.userInfo.balance', userBalance * 1 - item.pay * 1);
					// vk.toast('自动购买成功！该集已解锁');
					//遍历dataList数组，找到付费的集数，并解锁，防止用户来回切换标签页后导致未解锁
					for (var i = 0; i < that.dataList.length; i++) {
						if (that.dataList[i]._id == item._id) {
							that.dataList[i].had_pay = true;
						}
					}
				}
			});
		},

		back() {
			this.rechargeShow = false; //先关闭充值弹窗，再展示提醒订阅弹窗
			this.showdingyue = true;
		},

		//计算一共有多少组数据
		async computer() {
			const tv_total = await db
				.collection('a_tv_series')
				.where({
					tv_id: this.tvinfo._id
				})
				.count();
			this.total = tv_total.result.total;
			//当总集数不超过30集，直接1到总集数
			if (this.total < 31) {
				this.list1.push({
					name: '1-' + this.total,
					start: 1,
					end: this.total
				});
				this.get_series_info(1, this.total);
			} else {
				let b = this.total / 30;
				let intb = Math.ceil(b);
				// console.log("最后一部分的集数=", intb); //向上取整数
				for (var i = 0; i < intb; i++) {
					let start = i * 30 + 1;
					let end = i * 30 + 30;
					if (end > this.total) {
						end = this.total;
					}
					this.list1.push({
						name: start + '-' + end,
						start: start,
						end: end
					});
				}
			}
		},
		//获取每组数据的具体详情
		async get_series_info(start, end) {
			console.log(start, '-', end);
			uni.showLoading({
				title: '加载中...'
			});
			var that = this;
			that.all = [];
			if (!start) {
				start = 1;
			}
			if (!end) {
				end = 30;
			}

			vk.callFunction({
				url: 'client/video/pub/start_end_series',
				data: {
					start: start,
					end: end,
					user_id: vk.vuex.get('$user.userInfo._id') || 'no',
					tv_id: this.tvinfo._id,
					plus_type: vk.vuex.get('$user.userInfo.plus_type') || 0
				},
				success: (data) => {
					console.log('player页面处理后的数据', data);
					that.all = data.series;
					uni.hideLoading();
				}
			});
		},
		ended() {
			if (this.k == this.dataList.length - 1) {
				uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).seek(0);
				uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).pause();
				this.adviseMore = true; //全部播放完后，推荐更多视频
			} else {
				this.current = this.k + 1;
			}
		},

		follow_tv() {
			this.dingyue(false); //调用函数，弹出订阅窗口,false表示订阅后不自动退出
			console.log('点击追剧');
			vk.callFunction({
				url: 'client/follow_tv/pub/add',
				data: {
					appid: vk.vuex.get('$app.appid'),
					appname: vk.vuex.get('$app.appname'),
					user_id: vk.vuex.get('$user.userInfo._id') || 'no',
					nickname: vk.vuex.get('$user.userInfo.nickname') || '匿名用户',
					tv_name: this.tvinfo.tv_name,
					tv_image: this.tvinfo.tv_image,
					tv_id: this.tvinfo._id || 'no',
					series: this.currentInfo.series,
					series_id: this.currentInfo._id,
					is_follow: true
				},
				success: (data) => {
					console.log('添加追剧成功');
					this.show_redicon = !this.show_redicon;
				}
			});
		},

		dingyue(backToIndex) {
			let that = this;
			uni.requestSubscribeMessage({
				tmplIds: vk.vuex.get('$app.msglist'),
				success(res) {
					if (that.show_redicon) {
						uni.showToast({
							title: '操作成功'
						});
					} else {
						uni.showToast({
							title: '添加追剧成功'
						});
					}
					vk.callFunction({
						url: 'client/user/kh/dingyue',
						showLoading: false,
						data: {
							msglist: vk.vuex.get('$app.msglist'),
							tv_id: that.tvinfo._id,
							tv_name: that.tvinfo.tv_name
						}
					});

					if (backToIndex) {
						uni.navigateBack();
					}
				}
			});
		},

		//点击播放&&暂停
		play(state, event) {
			console.log('点击了播放');
		},

		//当视频暂停时，会展示封面图，点击封面图触发此事件
		async click_tvimg(item) {
			console.log('点击了封面图');
			let plus_type = vk.vuex.get('$user.userInfo.plus_type');
			// 判断金豆是否不足,不足的话直接提示去充值
			if (vk.vuex.get('$user.userInfo.balance') < item.pay && item.had_pay == false && plus_type == 0) {
				this.rechargeShow = true; //打开充值弹窗
				return;
			}

			//账户余额大于当前集需要支付的金豆数，且当前集未支付，且当前需支付的金豆数大于0
			if (vk.vuex.get('$user.userInfo.balance') > item.pay && item.had_pay == false && item.pay > 0 && plus_type == 0) {
				this.paySeries(this.dataList[this.k], this.k); //调用支付函数
				this.isShow = true; //展示视频播放组件
				return;
			}
			this.isShow = true; //展示视频播放组件
		},

		change(event) {
			this.k = event.detail.current;
			//current一定要改，否则会出现选集黑屏的问题
			this.current = event.detail.current;
		},

		//swiper动画结束时会触发animationfinish事件
		animationfinish(event) {
			//这里进行判断，如果是最后一个视频就加载视频进入列表
			if (this.k == this.dataList.length - 1) {
				// this.GETNEW()
			}
		},

		//用户点赞操作
		cLike(like_state) {
			//like_state代表是点赞还是取消点赞，点赞是false,取消是true
			console.log('like_state=', like_state);
			this.dataList[this.k].like = !this.dataList[this.k].like;
			const video = this.dataList[this.k];
			if (like_state) {
				video.like_num = video.like_num * 1 - 1;
			} else {
				video.like_num = video.like_num * 1 + 1;
			}
			//操作数据库，点赞则新增一条点赞记录，取消点赞则删除记录
			vk.callFunction({
				url: 'client/video/pub/click_like',
				data: {
					like_state: like_state,
					user_id: vk.vuex.get('$user.userInfo._id') || 'no',
					nickname: vk.vuex.get('$user.userInfo.nickname') || '匿名用户',
					tv_name: this.tvinfo.tv_name,
					tv_image: this.tvinfo.tv_image,
					tv_id: this.tvinfo._id || 'no',
					series: this.currentInfo.series,
					series_id: this.currentInfo._id
				},
				success: (data) => {
					console.log('云函数执行完成');
				}
			});
		},

		//当页面隐藏或卸载时，记下观看记录
		async add_history() {
			uni.setStorageSync('seriesList', '');
			if (!vk.vuex.get('$user.userInfo._id')) {
				return;
			}
			vk.callFunction({
				url: 'client/history/pub/add',
				data: {
					user_id: vk.vuex.get('$user.userInfo._id'),
					nickname: vk.vuex.get('$user.userInfo.nickname') || '匿名用户',
					tfid: vk.vuex.get('$user.userInfo.tfid') || 0,
					invite_code: vk.vuex.get('$user.userInfo.invite_code') || 0,
					middleman_id: vk.vuex.get('$user.userInfo.middleman_id') || 0,
					tfid: vk.vuex.get('$user.userInfo.tfid'),
					tv_name: this.tvinfo.tv_name,
					tv_id: this.tvinfo._id,
					tv_image: this.tvinfo.tv_image,
					series: this.currentInfo.series,
					series_id: this.currentInfo._id,
					is_follow: false
				},
				success: (data) => {
					console.log('添加历史成功');
				}
			});
		},

		//检查下一集的点赞状态
		async check_like(k) {
			vk.callFunction({
				url: 'client/video/pub/check_LikeAndPay',
				data: {
					user_id: vk.vuex.get('$user.userInfo._id') || 'no',
					series_id: this.dataList[this.k]._id,
					nextseries_id: this.dataList[k + 1]._id,
					k: k
				},
				success: (data) => {
					if (data.like_k) {
						this.dataList[k].like = true;
					}
					if (data.next_like_k) {
						this.dataList[k + 1].like = true;
					}
				}
			});
		},

		//检查公众号弹窗
		async gzhbox(k) {
			//引导关注公众号弹窗
			let gzhstart = this.tvinfo.gzhbox_start * 1 - 1;
			let gzhend = this.tvinfo.gzhbox_end * 1;
			if (this.dataList[k].series > gzhstart && this.dataList[k].series < gzhend) {
				//存储在vuex里的变量，记录了用户是否已经打开过公众号链接
				//如果已打开过，hide_gzhbox为true,则再次看剧时不弹公众号窗口
				if (vk.vuex.get('hide_gzhbox') == false) {
					this.showgzh = true;
					return;
				}
			}
			//提前三集加载更多视频数据
			if (k > this.dataList.length - 4) {
				console.log('播放到倒数第三集了', this.dataList[this.dataList.length - 1].series);
				let currentSerie = this.dataList[this.dataList.length - 1].series;
				//如果当前不是最后一集，就继续加载更多
				if (this.total > currentSerie) {
					this.loadMoreSerie(currentSerie);
				}
			}
		},
		//记录用户的看剧记录
		async vip_history(k) {
			vk.callFunction({
				url: 'client/history/kh/vip_history',
				title: '请求中...',
				data: {
					appid: vk.vuex.get('$app.appid'),
					appname: vk.vuex.get('$app.appname'),
					tv_name: this.tvinfo.tv_name,
					tv_id: this.tvinfo._id,
					tv_image: this.tvinfo.tv_image,
					series: this.currentInfo.series,
					series_id: this.currentInfo._id
				},
				success: (data) => {
					console.log('记录用户看剧记录');
				}
			});
			if (this.tvinfo._id) {
				vk.callFunction({
					url: 'client/history/kh/shortloss',
					title: '请求中...',
					data: {
						appid: vk.vuex.get('$app.appid'),
						appname: vk.vuex.get('$app.appname'),
						tv_name: this.tvinfo.tv_name,
						tv_id: this.tvinfo._id,
						tv_image: this.tvinfo.tv_image,
						series: this.currentInfo.series
					},
					success: (data) => {
						console.log(data);
					}
				});
			}
		},

		open() {
			console.log('选集框已打开');
		},
		close() {
			this.show = false;
			this.showgzh = false;
		},
		rechargeopen() {
			console.log('充值弹窗开启');
		},
		closedingyue() {
			//关闭引导用户订阅的弹窗
			this.showdingyue = false;
			uni.switchTab({
				url: '/pages/index/index'
			});
		},

		upper: function (e) {},
		lower: function (e) {},
		scroll: function (e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		jump(url) {
			//用户点击进入公众号以后，下次就不再展示
			vk.vuex.set('hide_gzhbox', true);
			uni.navigateTo({
				url: url
			});
		},
		//视频加载进度
		progress(e) {
			// console.log("当前视频加载进度=", e.detail.buffered);
		},
		progress2(e) {
			// console.log("预加载视频进度=", e.detail.buffered);
		}
	}
};
</script>

<style>
page {
	background-color: #000000;
}

/* //选集文字的样式 */
.xuanjiStyle {
	color: #ffffff;
	/* margin-top: 5px; */
	font-size: 14px;
	font-weight: bold;
	/* text-align: center; */
}

.userInfo {
	z-index: 999;
	position: absolute;
	bottom: 160px;
	right: 10px;
	display: flex;
	flex-direction: column;
}

.likeNumActive {
	color: red;
}

.content {
	width: 720rpx;
	z-index: 99;
	position: absolute;
	bottom: 8px;
	/* justify-content: center; */
	padding: 15rpx;
	flex-direction: column;
	justify-content: flex-start;
	color: #ffffff;
}

.userName {
	font-size: 30rpx;
	color: #ffffff;
	/* margin-top: 80rpx; */
}

.words {
	margin-top: 10rpx;
	font-size: 30rpx;
	color: #ffffff;
}

/* //popup */
.tv_name {
	font-size: 32rpx;
	font-weight: 600;
	margin: 20rpx 0 10rpx 20rpx;
}

.update_witch {
	font-size: 30rpx;
	margin: 0 0 20rpx 20rpx;
}

.scroll-Y {
	height: 900rpx;
}

.tv_image {
	/* position: relative; */
	width: 230rpx;
	height: 364rpx;
	border-radius: 10rpx;
}

.series {
	/* position: absolute; */
	color: #fff;
	background-color: black;
	opacity: 0.9;
	width: 230rpx;
	height: 50rpx;
	text-align: center;
	border-radius: 0 0 10rpx 10rpx;
	margin-top: -60rpx;
	background: rgba(0, 0, 0, 0.7);
}

.lock {
	width: 80rpx;
	height: 80rpx;
	position: absolute;
	margin-top: 120rpx;
	margin-left: 75rpx;
}

.lock_bg {
	background: rgba(0, 0, 0, 0.4);
	height: 314rpx;
	width: 230rpx;
	border-radius: 10rpx 10rpx 0 0;
	position: absolute;
	margin-top: -364rpx;
}

.backstyle {
	color: #ffffff;
	position: fixed;
	/* background-color: aqua; */
	margin-top: 80rpx;
	margin-left: 30rpx;
	z-index: 9999999;
	height: 60rpx;
	width: 150rpx;
}
</style>
